<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="tabList"
				:current="tabIndex"
				:scrollable="false"
				:activeStyle="{
					fontWeight: 'bold'
				}"
				@click="tabClick">
			</u-tabs>
		</u-sticky>
		
		<view class="search">
			<view class="search-item" @click="dateShow = true">
				<u-search placeholder="选择日期筛选"
					shape="square"
					:disabled="true"
					v-model="searchValue"
					:showAction="false"
					@change="searchChange">
				</u-search>
			</view>
			<view class="add-button" @click="searchValue = ''">
				重置
			</view>
		</view>
		<view class="" v-if="tabIndex === 0">
			<view style="margin-top: 100rpx;" v-if="list.length < 1">
				<u-empty
					text="暂无数据"
					icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
				</u-empty>
			</view>
			
			<view>
				<u-swipe-action>
					<u-swipe-action-item
						:options="options" 
						v-for="(item,index) in list"
						:key="item.id"
						@click="delItem(item.id)">
						<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/scgl/ycgl/detail?spType=用户&id='+item.id)">
							<view class="PhotographerBoxL PhotographerBoxLPosition">
								<view class="cu-avatar round xl" :style="'background-image:url('+item.frontImage+')'">
								</view>
								<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.carNum}}</view>
							</view>
							<view class="PhotographerBoxR">
								<view class="text-sm text-bold">用车日期：{{item.useTime}}</view>
								<view class="text-sm text-grey" style="position: absolute;right: 0;top:0;margin: 27rpx 25rpx 0 0;">
									{{item.tjDate}}
								</view>
								<view class="text-sm text-grey margin-top-xs">时间段：{{item.timeSlot}}</view>
								<view class="text-sm text-grey margin-top-xs">驾驶人：{{item.userName}}</view>
								<view class="text-sm text-grey margin-top-xs">目的地：{{item.destination}}</view>
								<view class="text-sm text-grey margin-top-xs" style="display: flex;margin-top: 30rpx;">
									<view>
										<u-avatar v-if="item.avatar" size="20" shape="square" :src="item.avatar"></u-avatar>
										<u-avatar
											v-else
											size="20"
											shape="square"
											:text="item.userName.slice(1)"
											:fontSize="item.userName.length > 2?8:12"
											bgColor="#0087FC">
										</u-avatar>
									</view>
									<span style="padding-left: 10rpx;color: #000;font-size: 24rpx;">由{{item.userName}}提交</span>
									<view style="position: absolute;right: 0;margin-right: 25rpx;">
										<text v-if="item.status == 0" style="color: #E6900D;font-weight: 26rpx;">{{item.spName+'处理中'}}</text>
										<text v-if="item.status == 1" style="color: #269B54;font-weight: 26rpx;">审批通过</text>
										<text v-if="item.status == 2" style="color: #D67D6F;font-weight: 26rpx;">审批拒绝</text>
										<text v-if="item.status == 3" style="color: #909399;font-weight: 26rpx;">已撤销</text>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		
		<view class="" v-if="tabIndex === 1">
			<view style="margin-top: 100rpx;" v-if="cljcList.length < 1">
				<u-empty
					text="暂无数据"
					icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
				</u-empty>
			</view>
			<view>
				<u-swipe-action>
					<u-swipe-action-item
						:options="options" 
						v-for="(item,index) in cljcList"
						:key="item.id"
						@click="delItem(item.id)">
						<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/scgl/cljc/detail?id='+item.id)">
							<view class="PhotographerBoxL">
								<view class="cu-avatar round xl" :style="'background-image:url('+item.carImage+')'">
								</view>
								<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.carNum}}</view>
							</view>
							<view class="PhotographerBoxR">
								<view class="text-sm text-bold">检查日期：{{item.checkDate}}</view>
								<view class="text-sm text-grey margin-top-xs">检查人：{{item.userName}}</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		
		
		<u-calendar
			:show="dateShow"
			:maxDate="String(new Date())"
			:minDate="minDate"
			monthNum="7"
			:closeOnClickOverlay="true"
			@close="dateShow = false"
			@confirm="dateConfirm">
		</u-calendar>
		
		<uni-fab
			:content="content"
			horizontal="right"
			vertical="bottom"
			direction="vertical"
			@trigger="trigger">
		</uni-fab>
	</view>
</template>

<script>
	import { getList,del } from '@/api/journal.js'
	import { checkCarList, checkCarDel } from '@/api/checkCar'
	export default {
		data() {
			return {
				options:[{
					text: '删除',
					style: {
                        backgroundColor: '#f56c6c'
                    },
				}],
				minDate:new Date() - 6*30*24*60*60*1000,
				dateShow:false,
				searchValue:'',
				list:[],
				// 车辆检查
				cljcList:[],
				pageNum:1,
				contenUser:[
					{
						path:'/subPackTask/work/scgl/ycgl/index',
						iconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/489e567768fe4dc08ec0c0bb05d5b0be.png',
						selectedIconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/489e567768fe4dc08ec0c0bb05d5b0be.png',
						text: '添加日志',
						active: false
					},
					{
						path:'/subPackTask/work/scgl/cljc/index',
						iconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/489e567768fe4dc08ec0c0bb05d5b0be.png',
						selectedIconPath: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/489e567768fe4dc08ec0c0bb05d5b0be.png',
						text: '添加检查',
						active: false
					},
				],
				content: [],
				tabIndex:0,
				tabList:[
					{
						name: '行车日志',
					}, 
					{
						name: '车辆检查',
					}
				],
			}
		},
		onShow() {
			this.pageNum = 1
			if(this.tabIndex == 0){
				this.list = []
				this.getJournalList()
				this.content = [this.contenUser[0]]
			} else {
				this.cljcList = []
				this.getcljcList()
				this.content = [this.contenUser[1]]
			}
		},
		onReachBottom(){
			this.pageNum += 1
			if(this.tabIndex == 0){
				this.getJournalList()
			} else {
				this.getcljcList()
			}
		},
		onPullDownRefresh(){
			this.pageNum = 1
			if(this.tabIndex == 0){
				this.list = []
				this.getJournalList()
			} else {
				this.cljcList = []
				this.getcljcList()
			}
			uni.stopPullDownRefresh()
		},
		methods: {
			// getTabIndex(data){
			// 	this.pageNum = 1
			// 	this.tabIndex = data
			// 	if(this.tabIndex == 0){
			// 		this.list = []
			// 		this.getJournalList()
			// 	} else {
			// 		this.cljcList = []
			// 		this.getcljcList()
			// 	}
			// },
			delItem(id){
				uni.showModal({
					title: "删除？",
					content: "是否确认删除",
					confirmText: '是',
					cancelText: '否',
					success:  res => {
						if (res.confirm){
							if(this.tabIndex == 0){
								this.delJournal(id)
							}else{
								this.delcljc(id)
							}
						}
					}
				})
			},
			async delJournal(id){
				const { data } = await del(id);
				if(data.code == 200){
					this.pageNum = 1
					this.list = []
					this.getJournalList()
					uni.showToast({ title: '行车日志删除成功', icon: 'none' })
				}else{
					uni.showToast({ title: '行车日志删除失败', icon: 'none' })
				}
			},
			async getJournalList(){
				let params = {
					useTime:this.searchValue,
					pageNum:this.pageNum,
				}
				const { data } = await getList(params);
				if(data.code == 200 && data.rows.length > 0){
					this.list = [...this.list,...data.rows]
				}
			},
			searchChange(value){
				this.pageNum = 1
				if(this.tabIndex == 0){
					this.list = []
					this.getJournalList()
				} else {
					this.cljcList = []
					this.getcljcList()
				}
			},
			dateConfirm(value){
				this.searchValue = value[0]
				this.dateShow = false
			},
			trigger(e){
				this.gotoPage(e.item.path)
			},
			tabClick(item) {
				this.tabIndex = item.index
				// this.searchValue=''
				this.pageNum = 1
				if(this.tabIndex == 0){
					this.list = []
					this.getJournalList()
					this.content = [this.contenUser[item.index]]
				} else {
					this.cljcList = []
					this.getcljcList()
					this.content = [this.contenUser[item.index]]
				}
			},
			async delcljc(id){
				const { data } = await checkCarDel(id);
				if(data.code == 200){
					this.pageNum = 1
					this.cljcList = []
					this.getcljcList()
					uni.showToast({ title: '行车日志删除成功', icon: 'none' })
				}else{
					uni.showToast({ title: '行车日志删除失败', icon: 'none' })
				}
			},
			async getcljcList(){
				let params = {
					checkDate:this.searchValue,
					pageNum:this.pageNum,
				}
				const { data } = await checkCarList(params);
 				if(data.code == 200 && data.rows.length > 0){
					this.cljcList = [...this.cljcList,...data.rows]
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.add-button{
		line-height: 104rpx;
		color: #0081ff;
	}
	
	.PhotographerBoxLPosition{
		padding: 48rpx 25rpx;
	}
</style>
